<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{margin: 0px; padding: 0px}
			#ul1 li{list-style: none; width: 100px; height: 100px; border: 1px solid black; margin: 10px; float:left; background-color: gray}
			#ul1 {width: 366px; margin: 100px auto; border: 1px solid black; height: 366px; position: relative;}
			#ul1 li img{width: 100%; height: 100%;}
		</style>
		<script src = '../startMove.js'></script>
		<script>
			/*
				九宫格：
			 */
			window.onload = function(){
				var oUl = document.getElementById("ul1");
				var aLis = oUl.getElementsByTagName("li");

				var currentIndex = 2;
				//相对转绝对(文档流的转换)
				for(var i = 0; i < aLis.length; i++){
					aLis[i].style.left = aLis[i].offsetLeft + 'px';
					aLis[i].style.top = aLis[i].offsetTop + 'px';

					var oImg = document.createElement("img");
					oImg.src = "img/" + (i + 1) + ".jpg";
					aLis[i].appendChild(oImg);
				}

				for(var i = 0; i < aLis.length; i++){
					aLis[i].style.position = 'absolute';
					aLis[i].style.margin = "0px";
				}

				for(var i = 0; i < aLis.length; i++){
					aLis[i].onmouseover = function(){
						//移入这个li标签的层级，重新设置
						this.style.zIndex = currentIndex++;
						startMove(this, {
							width: 200,
							height: 200,
							marginLeft: -50,
							marginTop: -50
						})
					}

					aLis[i].onmouseout = function(){
						startMove(this, {
							width: 100,
							height: 100,
							marginLeft: 0,
							marginTop: 0
						})
					}
				}
			}
		</script>
	</head>
	<body>
		<ul id = 'ul1'>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>